<template>
  <div class="dz-details">
    <div class="top">
      <div class="title">{{detailAll.item_detail.title}}</div>
      <div class="introduction">
        <div>成分：{{this.detailAll.dxcy_gift_bag_item_list.list?this.detailAll.dxcy_gift_bag_item_list.list.length:0}} 种</div>
        <div>毛利率：{{this.detailAll.dxcy_rate}}</div>
        <div>成本价：{{detailAll.item_detail.cost}}元</div>
        <div>建议零售价：{{detailAll.item_detail.price}}元</div>
      </div>
      <div class="buy-num">
        <div class="buy-title">购买数量：<span>（购买{{value?value:0}}杯物料）</span></div>
        <div>
          <count-plug
            :minLimit='minLimit'
            v-model="value"
            :disabled="true"
            :step='step'
            :value='value'
            :dzClass="true">
          </count-plug>
        </div>
      </div>
    </div>
    <div class="material">
      <div class="material-title">物料</div>
      <materialList :buyValue="value" :list="list" @changeNum="changeNum" v-if="list.length>0" />
      <no-data :noData="noData" v-else></no-data>
    </div>
    <div class="fixed-btn" v-if="list.length>0">
      <div class="flex">
        <div class="price">￥{{totalPrice}}</div>
        <div class="buy-btn" @click="handleClickSettlement">立即购买</div>
      </div>

    </div>
  </div>
</template>
<script>
import countPlug from '@/components/CountPlug'
import materialList from './components/materialList'
import Store from '@/utils/store'
import noData from '@/components/noData/index'

export default {
  components: {
    countPlug,
    materialList,
    noData
  },
  props: {
    detailAll: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      item_detail: {},
      minLimit: 0,
      step: 1,
      value: 0,
      result: [],
      // totalPrice: 360,
      list: [],
      noData: {
        text: '暂未绑定物料',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_order_data.png'
      }
    }
  },
  created() {
    this.value = this.detailAll.dxcy_gift_bag_item_list.origin_num || 0
    this.step = this.detailAll.dxcy_gift_bag_item_list.add_num || 0
    this.list = this.detailAll.dxcy_gift_bag_item_list.list || []
  },
  computed: {
    totalPrice: function() {
      let sum = 0
      if (this.list.length > 0) {
        this.list.forEach(function(data) {
          sum = parseInt(sum) + parseInt(data.value * data.price)
        })
        this.$emit('totalList', sum, this.list)
      }
      return sum
    }
  },
  methods: {
    /**
     * 结算
     */
    handleClickSettlement() {
      const list = this.list.filter(item => item.value != 0)
      if (list.length == 0) {
        this.$Error('至少购买一件物料')
      } else {
        const itemId = []
        const num = []
        list.forEach(function(data) {
          itemId.push(data.item_id)
          num.push(data.value)
        })
        const orderBuy = {}
        orderBuy.num = num.toString()
        orderBuy.is_dxcy_gift_dz = 1
        orderBuy.item_id = itemId.toString()
        orderBuy.is_dxcy_gift_item_id = this.detailAll.item_detail.item_id
        orderBuy.type = 'oncart'
        Store.save('orderBuy', orderBuy)
        this.$JumpName(this, 'buy')
      }
    },
    changeNum(list) {
      this.list = list
    }
  }
}
</script>
<style lang="scss">
.dz-details {
  .top {
    background: #fff;
    margin: 28px 32px;
    border-radius: 16px;
    padding: 40px 36px;
    .title {
      font-size: 32px;
      line-height:44px;
      color: #333;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .introduction {
      font-size: 28px;
      color: #C9C9C9;
      padding-bottom: 24px;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #dedede;
      div {
        width: 50%;
        margin-top: 16px;
      }
    }
    .buy-num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      .buy-title {
        font-size: 28px;
        span {
          color: #C9C9C9;
        }
      }
    }
  }
  .material {
    background: #fff;
    margin-top: 32px;
    .material-title {
      font-size: 28px;
      color: #C9C9C9;
      padding-top: 32px;
      text-align: center;
    }
  }
  .fixed-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    .flex {
      display: flex;
      padding: 0 32px;
      height: 100px;
      align-items: center;
      justify-content: space-between;
      .price {
        font-size: 32px;
        color: #E84F39;
        font-weight: 500;
      }
      .buy-btn {
        font-size: 24px;
        width: 400px;
        height: 76px;
        line-height: 76px;
        text-align: center;
        color: #fff;
        background: linear-gradient(90deg,#f57f1a, #f0601f);
        border-radius: 38px;
      }
    }
  }
}
</style>